<template>
    <div class="cate skeleton">
        <!-- grid -->
        <view class="cate-section ">
            <view @click="onPress(index)" v-for="(item,index) in metaData" :key="index" class="cate-item">
                <image class="skeleton-radius" :src="item.imageSrc"></image>
                <text class="skeleton-rect">{{item.title}}</text>
            </view>
        </view>
    </div>
</template>

<script>
    export default {
        props:{
            metaData:{
                type:Array,
                default:function () {
                    return [
                    ]
                }
            }
        },
        data() {
            return {}
        },
        watch: {},
        methods: {
            onPress(index){
                // if(index == 4){
                //     uni.navigateTo({
                //         url: "/pages/nobuild/nobuild"
                //     })
                // }else{
                    const {route} = this.metaData[index];
                    uni.navigateTo({
                        url: route
                    })
                // }
               
                
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;
    }
    /* 分类 */
    .cate-section {
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap:wrap;
        padding: 30upx 22upx;
        background: #fff;
        border-top-left-radius: 20upx;
        border-top-right-radius: 20upx;
        .cate-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: $font-sm + 1upx;
            color: $font-color-dark;
        }
        /* 原图标颜色太深,不想改图了,所以加了透明度 */
        image {
            width: 60upx;
            height: 60upx;
            margin-bottom: 10upx;
            // border-radius: 50%;
            // opacity: .7;
            // box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
        }
    }

</style>
